<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="UTF-8">
  <title>login</title>
  <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">                       <%--提交的时候验证密码和用户名是否输入正确onsubmit="checkAll();"--%>
  <form action="userLogin" method="post" id="form" >
    <h1 id="loginMsg">美女交友组织登录系统</h1>
    <p>用户:<input id="username" name="name" type="text"                    <%--失去焦点检查用户名是否为空--%>          <%--获得焦点--%>
                 value="${name==null?'':name}" placeholder="请输入用户名" onblur="script:check(${name});" onfocus="script:clean();">
      <span style="color: red;font-size: 10px" id="warring"></span></p>
                                                                                                <%--检查密码输入情况--%>
    <p>密码:<input id="password" name="passWord" type="password" placeholder="请输入用户密码"onblur="script:checkPassWord();"></p>

    <div id="subDiv">
      <input type="submit" class="button" value="登录">
      <input type="reset" class="button" value="清空输入">&nbsp;&nbsp;&nbsp;
      <%--跳转到用户注册的界面--%>
      <%--<a href="user-register.jsp">没有账号？点击注册</a>--%>
      <a href="user-register.jsp">没有账号？点击注册</a>
    </div>
  </form>
</div>

</body>
</html>
<script>
    window.onload = function () {
      if(${fail}){
        alert("用户名或密码错误!登录失败!")
      }
        }
  //检查用户名输入的情况
  function check(){
  let value = document.getElementById("username").value;
  //任意字符4-10个
  let che = /.{4,10}/
    if(che.test(value)){
      //在这个标签后面的span标签中显示一个勾的图片
      document.getElementById("warring").innerHTML = '<img src="img/gou2.png" width="18px"/>';
      return true;
    }else {
      //设置一个提醒用户不存在的标志 显示用户不存在
      document.getElementById("warring").innerText = "输入错误";
      return false;
    }
  }
  function clean(){
    document.getElementById("warring").innerText = "";
  }
  //检查密码输入的情况
  function checkPassWord() {
    let password = document.getElementById("password");
    return password != null;
  }
  //检查密码和用户名
  function checkAll() {
    //密码和用户名都正确才能登录
    return check()&&checkPassWord();
  }
</script>